<template>
  <div class="app-container home">
    <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
      <el-tab-pane name="first">
        <span slot="label"><i class="el-icon-goods"></i> 项目授权</span>

        <el-row :gutter="20">
          <el-col :span="4"></el-col>
          <el-col :span="16">

            <el-form ref="form" :model="form" :rules="rules" label-width="80px">
              <el-form-item label="授权项目" prop="entryId">
                <el-select v-model="form.entryId" placeholder="请选择授权项目"  @change="getGoodList" style="width: 100%">
                  <el-option
                    v-for="entry in entryList"
                    v-if="entry.status == 1"
                    :key="entry.id"
                    :label="entry.entryName"
                    :value="entry.id"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="商品规格" prop="goodId">
                <el-select ref="goodSelect" v-model="form.goodId" @change="getGoodData" placeholder="请选择商品规格" style="width: 100%">
                  <el-option
                    v-for="entry in goodList"
                    :key="entry.id"
                    :label="entry.goodName"
                    :value="entry.id"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="授权域名" prop="authValue">
                <el-input v-model="form.authValue" placeholder="请输入授权域名，例如: abcd.com" />
              </el-form-item>
              <el-form-item label="授权价格" prop="price" v-if="form.price != null">
                <b style="color: orangered;font-size: 22px">¥{{form.price}}</b>
              </el-form-item>
              <el-form-item label="授权价格" prop="price" v-if="form.price == null">
                <b style="color: orangered;font-size: 22px">¥0</b>
              </el-form-item>
              <el-form-item v-for="paydata in payList" :label="paydata.name">
                <el-button v-if="paydata.paymentChannel == 1" type="primary" @click="pay(paydata.id,1)">支付宝</el-button>
                <el-button v-if="paydata.paymentChannel == 2" type="success" @click="pay(paydata.id,2)">微信</el-button>
                <el-button v-if="paydata.paymentChannel == 3" type="primary" @click="pay(paydata.id,1)">支付宝</el-button>
                <el-button v-if="paydata.paymentChannel == 3" type="success" @click="pay(paydata.id,2)">微信</el-button>
              </el-form-item>
            </el-form>
          </el-col>
          <el-col :span="4"></el-col>
        </el-row>

      </el-tab-pane>
      <el-tab-pane name="second" label="我的授权" style="min-height:620px;padding: 10px">
        <span slot="label"><i class="el-icon-s-check"></i> 我的授权</span>
        <el-table v-loading="authLoading" :data="authList">
          <el-table-column label="授权编号" align="center" prop="authNo" />
          <el-table-column label="授权项目" align="center" prop="authEntryId">
            <template slot-scope="scope">
              <el-tag  v-for="entry in entryList" v-if="entry.id == scope.row.authEntryId">{{entry.entryName}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="授权类型" align="center" prop="authType">
            <template slot-scope="scope">
              <dict-tag :options="dict.type.auth_type" :value="scope.row.authType"/>
            </template>
          </el-table-column>
          <el-table-column label="到期时间" align="center" prop="endTime" width="180">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.endTime, '{y}-{m}-{d}') }}</span>
            </template>
          </el-table-column>
          <el-table-column label="授权状态" align="center" prop="status">
            <template slot-scope="scope">
              <dict-tag :options="dict.type.auth_status" :value="scope.row.status"/>
            </template>
          </el-table-column>
          <el-table-column label="创建时间" align="center" prop="createTime" width="180" />
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-warning"
                @click="getAuthInfo(scope.row)"
              >详情</el-button>
            </template>
          </el-table-column>
        </el-table>

        <pagination
          v-show="authTotal>0"
          :total="authTotal"
          :page.sync="authQueryParams.pageNum"
          :limit.sync="authQueryParams.pageSize"
          @pagination="getAuthList"
        />
      </el-tab-pane>
      <el-tab-pane name="third" label="我的订单" style="min-height:620px;padding: 10px">
        <span slot="label"><i class="el-icon-s-order"></i> 我的订单</span>
        <el-table v-loading="orderLoading" :data="orderList">
          <el-table-column label="商户单号" align="center" prop="outTradeNo" width="180" fixed />
          <el-table-column label="授权编号" align="center" prop="authNo" width="160" />
          <el-table-column label="商品名称" align="center" prop="goodName" width="250" />
          <el-table-column label="支付方式" align="center" prop="payMethod" width="100">
            <template slot-scope="scope">
              <dict-tag :options="dict.type.payment_channel" :value="scope.row.payMethod"/>
            </template>
          </el-table-column>
          <el-table-column label="订单金额" align="center" prop="price" width="100" />
          <el-table-column label="交易时间" align="center" prop="transactionTime" width="180" />
          <el-table-column label="退款金额" align="center" prop="refundMoney" width="100" />
          <el-table-column label="退款时间" align="center" prop="refundTime" width="180" />
          <el-table-column label="订单状态" align="center" prop="status" width="100" fixed="right" >
            <template slot-scope="scope">
              <dict-tag :options="dict.type.order_status" :value="scope.row.status"/>
            </template>
          </el-table-column>
        </el-table>

        <pagination
          v-show="orderTotal>0"
          :total="orderTotal"
          :page.sync="orderQueryParams.pageNum"
          :limit.sync="orderQueryParams.pageSize"
          @pagination="getOrderList"
        />
      </el-tab-pane>
    </el-tabs>


    <!-- 购买域名 -->
    <el-dialog title="扫码支付" :visible.sync="qropen" width="350px" append-to-body>
      <div class="block" style="width: 200px;height: 200px;margin:auto">
        <el-image :src="qrurl"></el-image>
      </div>
      <div style="width: 100%;text-align:center;color: orangered">
        <b v-if="seconds>9">支付剩余时间：0{{minutes}}:{{seconds}}</b>
        <b v-if="seconds<=9">支付剩余时间：0{{minutes}}:0{{seconds}}</b>
      </div>
      <div slot="footer" class="dialog-footer" style="text-align: center">
        <el-button type="primary" @click="qrCancel()">已完成支付</el-button>
        <el-button @click="qrCancel()">取消支付</el-button>
      </div>
    </el-dialog>

    <el-dialog title="授权详情" :visible.sync="authOpen" width="500px" append-to-body>
      <el-form ref="form" :model="authInfo" label-width="80px">
        <el-form-item label="授权项目" prop="authEntryId">
          <el-select v-model="authInfo.authEntryId" disabled placeholder="请选择授权项目" style="width: 100%">
            <el-option
              v-for="entry in entryList"
              :key="entry.id"
              :label="entry.entryName"
              :value="entry.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="授权类型" prop="authType">
          <el-select v-model="authInfo.authType" disabled placeholder="请选择授权类型" style="width: 100%">
            <el-option
              v-for="dict in dict.type.auth_type"
              :key="dict.value"
              :label="dict.label"
              :value="parseInt(dict.value)"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="授权域名" prop="authValue">
          <el-input v-model="authInfo.authValue" disabled type="textarea" placeholder="请输入授权域名" />
        </el-form-item>
        <el-form-item label="到期时间" prop="endTime">
          <el-date-picker clearable style="width: 100%" disabled
                          v-model="authInfo.endTime"
                          type="date"
                          value-format="yyyy-MM-dd"
                          placeholder="请选择到期时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="授权状态" prop="status">
          <el-select v-model="authInfo.status" disabled placeholder="请选择授权状态" style="width: 100%">
            <el-option
              v-for="dict in dict.type.auth_status"
              :key="dict.value"
              :label="dict.label"
              :value="parseInt(dict.value)"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
<!--        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>-->
      </div>
    </el-dialog>


  </div>
</template>

<script>
import {entryList, goodList, payList, pay, orderList, authList, getAuth} from "@/api/system/authcenter";

export default {
  name: "authcenter",
  dicts: ['order_status', 'payment_channel','auth_type', 'auth_status'],
  data() {
    return {
      activeName: 'first',
      form:{},
      query:{},
      rules:{
        entryId: [
          { required: true, message: "请选择授权项目", trigger: "blur" }
        ],
        goodId: [
          { required: true, message: "请选择授权规格", trigger: "blur" }
        ],
        authValue: [
          { required: true, message: "请输入授权域名/系统验证码", trigger: "blur" }
        ],
      },
      entryList: [],
      goodList:[],
      payList:[],
      orderList:[],
      authList:[],
      // 总条数
      orderTotal: 0,
      // 查询参数
      orderQueryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      orderLoading: false,
      // 总条数
      authTotal: 0,
      // 查询参数
      authQueryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      authLoading: false,
      authInfo:{},
      authOpen: false,
      //二维码窗口
      qropen: false,
      //时间对象
      timer: null,
      //倒计时分钟
      minutes: '00',
      //倒计时秒
      seconds: '00',
      //支付超时
      isEnd: false,
      qrurl: null,
    };
  },
  created() {
    this.getEntryList();
    this.getPayList();
  },
  methods: {
    handleClick(tab, event) {
      if(tab.index == 0){
        this.form = {};
      }else if(tab.index == 1){
        this.getAuthList();
      }else if(tab.index == 2){
        this.getOrderList();
      }
    },
    /** 查询项目列表 */
    getEntryList(){
      entryList().then(response => {
        this.entryList = response.rows;
      });
    },
    getPayList(){
      payList().then(response => {
        this.payList = response.rows;
      });
    },
    getOrderList(){
      this.orderLoading = true;
      orderList(this.orderQueryParams).then(response => {
        this.orderList = response.rows;
        this.orderTotal = response.total;
        this.orderLoading = false;
      });
    },
    getAuthList(){
      this.authLoading = true;
      authList(this.authQueryParams).then(response => {
        this.authList = response.rows;
        this.authTotal = response.total;
        this.authLoading = false;
      });
    },
    getGoodList(){
      delete this.form.goodId;
      delete this.form.price;
      delete this.form.authType;
      this.query.entryId = this.form.entryId;
      goodList(this.query).then(response => {
        this.goodList = response.rows;
      });
    },
    getGoodData(){
      var index = this.$refs.goodSelect.hoverIndex;
      this.form.price = this.goodList[index].price;
      this.form.authType = this.goodList[index].authType;
    },
    getAuthInfo(row){
      const id = row.id
      getAuth(id).then(response => {
        this.authInfo = response.data;
        this.authOpen = true;
      });
    },
    pay(id,type){
      //订单提交
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.form.payId = id;
          this.form.payType = type;
          pay(this.form).then(response => {
            this.qrurl = response;
            this.qropen = true;
            this.countDown();
          });
        }
      })
    },
    // 二维码取消按钮
    qrCancel() {
      this.qropen = false;
      this.form = {};
    },
    //开始倒计时
    countDown(){
      this.minutes = "5";
      this.seconds = "0";
      this.timer = setInterval(() => {
        if(this.minutes == 0 && this.seconds == 0){
          clearInterval(this.timer);
          this.qropen = false;
          this.getList();
        }else if(this.seconds == 0){
          this.minutes = this.minutes - 1;
          this.seconds = "59"
        }else{
          this.seconds = this.seconds - 1
        }
      }, 1000);
    },
    goTarget(href) {
      window.open(href, "_blank");
    }
  }
};
</script>

<style scoped lang="scss">
.el-col{
  min-height:620px;
  padding-top: 150px;
  padding-bottom: 100px;
}
.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }
  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }
  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}
</style>

